<template>		
	<view class="bg_box">
		<view><slot name="list"></slot></view>
		<view class="bottomBar">
			<view class="bottomItem leftItem"><slot name="left"></slot></view>
			<view class="bottomItem centerItem"><slot name="center"></slot></view>
			<view class="bottomItem rightItem"><slot name="right"></slot></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"GroupFrame",
		components:{

		},

		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	
	.bg_box {
		position: relative;
		/* margin: 38rpx 36rpx 32rpx 32rpx; */
		margin: 2.4vh 36rpx 3.15vh 32rpx;		
		/* bottom:9rpx;
		left:10rpx; */
		box-sizing: border-box;
		/* width: 2802rpx; */
		/* height: 1304rpx; */
		width: 97.5vw;
		height: 85vh;
		background: #FFF;
		border: 2rpx solid #4F9AFF;
		box-shadow: 0px 3px 8px 0px rgba(3, 28, 62, 0.24);
		border-radius: 16px;
		overflow: hidden;
	}
	.bottomBar {
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		/* height: 138rpx; */
		height: 9vh;
		background: #4F9AFF;
		border-radius: 0px 0px 10px 10px;
		display: flex;
		flex:1;
		justify-content: space-between;
		align-items: center;
		padding:0 56rpx;
		box-sizing: border-box;
		/* width: 2802rpx; */
		width: 97.5vw;
		/* z-index: 999; */
	}
	.bottomItem {
		width:33.33%;
		/* border:0.5px gold solid; */
		display: flex;
	}
	
	.centerItem {
		justify-content: center;
	}
	.rightItem {
		justify-content: flex-end;
	}
</style>
